<!--* 表格列文本溢出组件-->
<!--* @module src/components/public-->
<!--* @desc 表格列文本溢出组件-->
<!--* @author chenyi-->
<!--* @date 2019年09月19日17:22:43-->

<template>
  <div>
    <div v-if="!overFlow" ref="nowrapText" class="text-nowrap"><slot></slot></div>
    <div
      v-else
      style="width: 100%;"
      @mouseover="handleMouseOver"
      @mouseleave="handleMouseLeave">
      <div class="ellipsis"    :style="'width:'+textWidth+'px'"><slot></slot></div>
      <el-popover
        trigger="click"
        placement="bottom"
        v-show="visible"
        @show="iconClass='el-icon-arrow-up'"
        @hide="iconClass='el-icon-arrow-down'"
      >
        <p><slot></slot></p>
        <div slot="reference" class="name-wrapper">
          <div class="el-popover-btn" >
            <i :class="iconClass"></i>
          </div>
        </div>
      </el-popover>
    </div>
  </div>

</template>

<script>
  export default {
    name: "es-ellipsis",
    props: {
      width:Number
    },
    data: function () {
      return {
        overFlow:false,//文本是否溢出
        textWidth:0
        ,visible:false//显示详情按钮
        ,iconClass:'el-icon-arrow-down'//
      }
    },
    mounted(){
      const nowrapTextWidth = this.$refs.nowrapText.offsetWidth;
      this.textWidth = (this.width?this.width:this.$el.parentElement.offsetWidth)-20;
      if(nowrapTextWidth > this.textWidth){
        this.overFlow=true;
      }
    },
    watch:{
      width(val){
        this.overFlow=false;
        this.$nextTick(()=>{
          this.textWidth=val-20;
          const nowrapTextWidth = this.$refs.nowrapText.offsetWidth;
          this.textWidth = (this.width?this.width:this.$el.parentElement.offsetWidth)-20;
          if(nowrapTextWidth > this.textWidth){
            this.overFlow=true;
          }
        });

      }
    },
    methods: {
      handleMouseOver(){
        this.visible=true;
      },
      handleMouseLeave(){
        this.visible=false;
      }
    }
  }
</script>

<style scoped>
  .text-nowrap{
    white-space: nowrap;
  }
  .el-popover-btn{
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    background-color: #ffffff;
    border-left: 1px solid #e7e7e7;
  }
  .el-popover-btn .el-icon-arrow-down,.el-popover-btn .el-icon-arrow-up{
    position: absolute;
    cursor: pointer;
    font-size: 18px;
    margin-left: 6px;
    margin-top: 8px;
    transform: translateY(50%);
  }
</style>
